<template>
    <div class="glo-index gutter-example">
      <a-input-search
          class="btn-top-search"
          v-model:value="searchValue"
          placeholder="请根配置名称搜索"
          enter-button="Search"
          size="large"
          @search="searchConfig"
          allow-clear
      />
      <a-button type="primary" size="large" style="margin:0 5px 0 5px">添加配置</a-button>
      <a-button type="primary" danger size="large" @click="clickInvalidBtn">
        查看作废列表
        <span>({{invalidFlagDataCount}})</span>
      </a-button>
        <a-row v-if="isEmpty" style="margin-top:10px">
            <a-col v-for="(item,index) in 8" :key="index" :span="6">
                <div class="empty-col">

                </div>             
            </a-col>
        </a-row>
        <a-row :gutter="16">           
            <a-col v-for="(item,index) in dictConfigData" :key="index" class="gutter-row" :span="6">            
                <div class="gutter-box" >
                    <a-divider><strong style="color:grey">{{item.configName}}</strong></a-divider>
                    <a-card hoverable>
                        <a-card-meta>
                          <template #avatar>
                              <strong>配置描述：</strong>
                              <span style="color:grey">{{item.configDescription}}</span>
                              <!-- <a-textarea v-model:value="item.configDescription" placeholder="请输入配置描述" allow-clear /> -->
                          </template>
                        </a-card-meta>                       
                        <a-card-meta style="margin-top:10px">
                          <template #avatar>
                            <strong>配置初值：</strong>
                            <!-- @change="changeDictConfig(item)" @focus="focusDictConfig(item)"  -->
                            <a-input v-model:value="item.configValue" 
                              style="width:185px" placeholder="请输入配置值" size="small" allowClear                           
                            />
                          </template>
                        </a-card-meta>                        
                        <a-card-meta style="margin-top:10px">
                          <template #avatar>
                            <strong>默认初值：</strong>
                            <a-input v-model:value="item.configDefault" size="small" disabled style="width:185px" placeholder="无默认值" />
                          </template>
                        </a-card-meta>                    
                        <a-card-meta style="margin-top:10px">
                          <template #avatar>
                            <strong>配置范围：</strong>
                            <a-input v-if="item.configRange===''?item.configRange='所有':item.configRange" v-model:value="item.configRange" size="small" style="width:185px" placeholder="无配置范围" />
                          </template>
                        </a-card-meta>                    
                        <a-card-meta style="margin-top:10px">
                          <template #avatar>
                            <strong>配置时间：</strong>
                            <a-input v-model:value="item.updateTime" size="small" style="width:185px" disabled placeholder="配置时间" />
                          </template>
                        </a-card-meta>
                        <br/>
                        <!-- <a-card-meta>
                          <template #avatar>
                            <strong>是否启用：</strong>
                            <a-switch 
                              v-if="item.invalidFlag===0?switchOn=true:switchOn=false"
                              v-model:checked="switchOn" 
                              @change="configSwitch(switchOn,item)"
                              checkedValue="0"
                              checked-children="开"  
                              unCheckedValue="1"
                              un-checked-children="关"
                              />
                          </template> 
                        </a-card-meta> -->
                        <template #actions>
                          <a-button type="primary" size="small" @click="confirmUpdate(item,index)">确定修改</a-button>
                          <!-- <a-button v-if="globalData.cancelUpdate" type="primary" size="small" @click="cancelUpdate">取消修改</a-button> -->
                          <!-- <setting-outlined key="setting" /> -->
                          <!-- <edit-outlined key="edit" /> -->
                          <a-button type="primary" size="small" danger @click="deleteConfig(item)">点击作废</a-button>
                          <!-- <ellipsis-outlined key="ellipsis" /> -->
                          <a-button type="primary" size="small">更多操作</a-button>
                        </template>
                      </a-card>
                </div>
            </a-col>
        </a-row>
        <a-pagination class="pagination-1" 
          @change="pageChange" size="small" 
          :total="totals" 
          show-size-changer 
          show-quick-jumper 
          :show-total="total => `总共 ${total} 条`" />
        <!-- 作废数据抽屉 -->
        <a-drawer
          v-model:visible="invalidVisible"
          class="custom-class"
          style="color: red"
          title="配置作废列表"
          placement="right"
        >
          <a-list item-layout="horizontal" :data-source="invalidFlagData">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :description="item.configDescription">
                  <template #title>
                    <a href="#">{{ item.configName }}</a>
                    <a-switch 
                      v-model:checked="switchOn" 
                      @change="openInvalidConfig(item.id)"
                      checked-children="开"  
                      un-checked-children="关"
                      />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-drawer>
    </div>
</template>

<script>
import { reactive, onMounted,watch ,ref,toRefs } from 'vue';
import { message } from "ant-design-vue";
import { useRouter } from 'vue-router';
import {$http} from '@/utils/axios';
export default {
    setup(){
        onMounted(()=>{
          getGlobalDictConfig()
          getInvalidFlagData()
        })
        let globalData = reactive({
            "isEmpty":true,
            "searchValue":"",
            "isOpenChecked":false,
            "dictConfigData":[],
            //源数据
            "originDictConfigObjectArr":[],
            "switchOn":false,
            "page":1,
            "size":10,
            "totals":0,
            //作废数量
            "invalidFlagDataCount":0,
            "invalidFlagData":[],
            "invalidVisible":false
        });
        //源数据
        let originDictConfigObjectArr=[]
        //搜索,点击清空回调
        function searchConfig(){
          getGlobalDictConfig()
          // message.success("success,"+globalData.searchValue);
        }
        //监听是否修改了
        watch(globalData.dictConfigData,(newValue,oldValue)=>{
          //message.info('监听着呢')
        },{deep:true})
        //分页事件
        function pageChange(page,pageSize){
          globalData.page = page
          globalData.size = pageSize
            message.success(`分页了，页码:${page},条数:${pageSize}`)
        }
        //获取正常数据
        function getGlobalDictConfig(){        
            globalData.isEmpty = true
            let param = `page=${globalData.page}&size=${globalData.size}&configName=${globalData.searchValue}`
            $http.get('/gatewayServer/sysMainDictConfig/findDictConfigByPage?'+param).then((result)=>{
              // console.log("数据:",result);
              if(result.data.data){ 
                if(result.data.data.length <= 0){
                  globalData.isEmpty = true
                  message.warn("暂无数据")
                  return
                }
                globalData.dictConfigData = result.data.data.dictConfigDTOList
                originDictConfigObjectArr=JSON.parse(JSON.stringify(result.data.data.dictConfigDTOList))
                globalData.totals = result.data.data.totals
                globalData.isEmpty = false
              }else{
                message.error(result.data.msg)
              }
              
            }).catch((error)=>{
              console.log("获取字典配置失败:"+error);
              message.error('获取字典配置失败')
            })
        }
        //获取作废数据
        function getInvalidFlagData(){
          $http.get("/gatewayServer/sysMainDictConfig/getInvalidFlagData?configName="+globalData.searchValue).then((res)=>{
            if(res.data.data.length >= 0){
              globalData.invalidFlagData = res.data.data
              globalData.invalidFlagDataCount = res.data.data.length
            }
          })
        }
        //查看作废列表
        function clickInvalidBtn(){
          // getInvalidFlagData()
          globalData.invalidVisible = true
        }
        //确定修改
        function confirmUpdate(val,index){
          //当前值
          debugger
          let currentConfigObject = JSON.stringify(Array.from(JSON.stringify(val)).sort())
          //对比两个对象是否相等(对象先转为字符串,将字符串转为数组,然后再数组排序后再转为字符串比较),改了半天还是原来的值
          console.log("源数据1:"+originDictConfigObjectArr);
          console.log("源数据:"+originDictConfigObjectArr[index]);
          debugger
          let oldConfigObject = JSON.stringify(Array.from(JSON.stringify(originDictConfigObjectArr[index])).sort())
          console.log("oldConfigObject:",originDictConfigObjectArr[index]);
          debugger
          if(oldConfigObject === currentConfigObject){
            message.warn('值都没变,不用修改')
            return
          }
            
          message.success('修改成功')
        }
        //取消修改
        function cancelUpdate(){
            message.success('取消修改成功')
        }
        //清楚配置值
        function changeDictConfig(index){
          console.log("原始值:",originDictConfigObject);
          message.success('清楚配置值')
        }
        //是否开启作废配置
        function openInvalidConfig(val){
          $http.get(`/gatewayServer/sysMainDictConfig/openInvalidConfig/${val}`).then((res)=>{
            if(res.data.data){
              message.success('开启成功')
              getGlobalDictConfig()
              getInvalidFlagData()
              globalData.invalidVisible=false
              globalData.switchOn = false
            }else{
              message.error(res.data.msg || '开启失败,请联系管理员')
            }
          })
          // getGlobalDictConfig()
          // getInvalidFlagData()
        }
        //删除(作废)配置
        function deleteConfig(item){
          $http.get(`/gatewayServer/sysMainDictConfig/invalidConfig/${item.id}`).then((res)=>{
            if(res.data.data){
              message.success('作废成功')
              getGlobalDictConfig()
              getInvalidFlagData()
            }else{
              message.error(res.data.msg || '作废失败,请联系管理员')
            }
          }).catch((err)=>{
            message.error(err || '作废失败,请联系管理员')
          })
          
        }
        return{
          ...toRefs(globalData),
          pageChange,
          confirmUpdate,
          cancelUpdate,
          changeDictConfig,
          deleteConfig,
          searchConfig,
          clickInvalidBtn,
          openInvalidConfig
        }
    }
}
</script>

<style scoped>
.glo-index{
    height: 100%;
    overflow-y:scroll;
}
/* 隐藏滚动条 */
.glo-index::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.gutter-example :deep(.ant-row > div) {
  background: transparent;
  border: 0;
}
/* 搜索 */
.glo-index .btn-top-search{
  width: 80%;
}
.gutter-box {
  /* background: #a1a3a4; */
  padding: 0px 0;
  border: 1px;
}
.empty-col{
  width:300px;
  height:350px;
  margin-left: 18px;
  margin-bottom: 20px;
  background-color:rgb(210, 205, 205);
  animation:emptyFrames 3s;
}
.empty-col:hover{
  cursor: pointer;
  animation:emptyFrames1 1s;
}

@keyframes emptyFrames1{
    from{
        background-color: rgb(210, 205, 205);
    }
    to{
      background-color:rgb(244, 248, 242);
    }
}

@keyframes emptyFrames{
    from{
        background-color: aliceblue;
    }
    to{
      background-color:rgb(210, 205, 205);
    }
}
.pagination-1{
    margin-top: 10px;
    float: right;
}

</style>